<!--
 * 严肃声明：
 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
 * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
 * Copyright (c) 2020 陈尼克 all rights reserved.
 * 版权所有，侵权必究！
 *
-->

<template>

  <div class="seting-box">
    <s-header :name="'账号管理'"></s-header>
    <div class="header">
        <img :src="header" alt="" width="18px" height="18px">
      </div>
      <p class="update" @click="testPhoneRule"></p>
    <ul class="user-list">
      <li @click="goTo('username')">
        <span>昵称</span>
        <span>{{title}}</span>
        <van-icon name="arrow" />
      </li>
      <li @click="on_show">
        <span>性别</span>
        <span class="gendedr">{{gender}}</span>
        <van-action-sheet
        v-model="show"
        :actions="actions"
        cancel-text="取消"
        close-on-click-action
        @cancel="onCancel"
        @select="onSelect"
      />
        <van-icon name="arrow" />
      </li>
      <li @click="goTo('signature')">
        <span>个性签名</span>
        <span>{{signature}}</span>
        <van-icon name="arrow" />
      </li>
      <li @click="goTo('phone')">
        <span>手机号码</span>
        <span>{{mobile}}</span>
        <van-icon name="arrow" />
      </li>
      <li @click="goTo('password')">
        <span>修改密码</span>
        <span>{{password}}</span>
        <van-icon name="arrow" />
      </li>
    </ul>
    <van-button class="save-btn" color="#1baeae" type="primary" @click="logout" block>退出登录</van-button>
  </div>
</template>

<script>
import sHeader from '@/components/SimpleHeader'
import { Toast } from 'vant'

export default {
  components: {
    sHeader
  },
  data() {
    return {
      show:false,
      title: '',
      introduceSign: '',
      password: '',
      gender:'',
      signature:'',
      actions:[{'name':'男'},{'name':"女"},{'name':'保密'}],
      id:'',
      header:'',
      mobile:''
    }
  },
  methods: {
    goTo(r){
      this.$router.push({ path: r })
    },
    on_show(){
      this.show=!this.show
    },
    onCancel() {
      this.show=!this.show
      Toast('取消')
    },
    onSelect(item){
      this.gender = item.name
      this.$axios.put(this.$settings.BASE_URL + 'userinfo/gender/' + this.id + '/',{
          gender:item.name
      },{headers:{'Authorization':'jwt ' + this.$cookies.get('token')}}).then(res=>{

      })
    },

    logout(){
      this.$cookies.remove('token')
      this.$cookies.remove('name')
      this.$cookies.remove('icon')
      this.$cookies.remove('id')
      this.$cookies.remove('icon')
      this.$cookies.remove('mobile')
      window.location.href = '/'
    },

testPhoneRule(){
    var res = cmr.supportedImageResolutions[0];
    var fmt = cmr.supportedImageFormats [0];
    // console.log("Resolution: "+res+", Format: "+fmt);
    cmr.captureImage( function( path ){
            alert( "Capture image success: " + path );
         },
        function( error ) {
              alert( "Capture image failed: " + error.message );
        },
        {resolution:res, format:fmt}
        );
      }
   },
  created(){
    this.header = this.$cookies.get('icon')
    this.id = this.$cookies.get('id')
    this.mobile = this.$cookies.get('mobile')
    this.mobile = this.mobile.substr(0, 3) + '******' + this.mobile.substr(9)
    this.$axios.get(this.$settings.BASE_URL + 'userinfo/detail/' + this.id + '/',
    {headers:{'Authorization':'jwt ' + this.$cookies.get('token')}}).then(res=>{
      this.title = res.title, this.gender = res.gender, this.signature = res.signature
    })


  }
}
</script>

<style lang="less" scoped>
  @import '../common/style/mixin';
  .update{
    color: #FF0000;
    font-size:12px;
    margin-left:170px;
  }
  .header{
    margin-top: 70px
  }
  img {
        .wh(80px, 80px);
        border-radius: 50%;
        margin-top: 4px;
        padding-left: 150px;
        padding-right: 150px;
      }
.gendedr{
  margin-left: 10px;
}
  .seting-box {
    .input-item {
      margin-top: 44px;
    }
    .save-btn {
      width: 80%;
      margin: 30px auto ;
    }
  }
  .user-list {
      padding: 0 20px;
      margin-top: 50px;
      li {
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #e9e9e9;
        display: flex;
        justify-content: space-between;
        font-size: 18px;
        .van-icon-arrow {
          margin-top: 15px;
        }
      }
    }
.handers {
  padding: 30px;
}

.deaulticon {
  height: 125px;
  width: 125px;
  padding-left: 125px;
  padding-right: 125px;
  display: flex;
  border-radius: 50%;
}

.seting-box {
  .input-item {
    margin-top: 20px;
  }

  .save-btn {
    width: 80%;
    margin: 20px auto;
  }
}

</style>
